<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="myCarousel" class="carousel slide" >
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="./../51.png" alt="first slide">
                <div class="carousel-caption">标题1</div>
            </div>
            <div class="item">
                <img src="./../52.png" alt="second slide">
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="./../53.png" alt="third slide">
                <div class="carousel-caption">标题3</div>
            </div>
        </div>
        <a href="#myCarousel" class="left carousel-control"
        role="button" data-slide-to="prev">
            <span class="glyphicon glyphicon-chevron-left"
            aria-hidden="true"></span>
            <span class="sr-only">
                prev
            </span>
            

        </a>
        <a href="#myCarousel" class="left carousel-control"
        role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"
            aria-hidden="true"></span>
            <span class="sr-only"></span>
        </a>
    </div>
    <div style="text-align:center;">
            <input type="button" class="btn start-slide" value="Start">
            <input type="button" class="btn pause-slide" value="Pause">
            <input type="button" class="btn prev-slide" value="Previous Slide">
            <input type="button" class="btn next-slide" value="Next Slide">
            <input type="button" class="btn slide-one" value="Slide 1">
            <input type="button" class="btn slide-two" value="Slide 2">
            <input type="button" class="btn slide-three" value="Slide 3">
        </div>
        <script>
            $(function(){
                // 初始化轮播
                $(".start-slide").click(function(){
                    $("#myCarousel").carousel('cycle');
                });
                // 停止轮播
                $(".pause-slide").click(function(){
                    $("#myCarousel").carousel('pause');
                });
                // 循环轮播到上一个项目
                $(".prev-slide").click(function(){
                    $("#myCarousel").carousel('prev');
                });
                // 循环轮播到下一个项目
                $(".next-slide").click(function(){
                    $("#myCarousel").carousel('next');
                });
                // 循环轮播到某个特定的帧 
                $(".slide-one").click(function(){
                    $("#myCarousel").carousel(0);
                });
                $(".slide-two").click(function(){
                    $("#myCarousel").carousel(1);
                });
                $(".slide-three").click(function(){
                    $("#myCarousel").carousel(2);
                });
            });
        </script>
    <script>
            $(function(){
                $('#myCarousel').on('slide.bs.carousel', function () {
                    alert("当调用 slide 实例方法时立即触发该事件。");
                });
            });
            </script>
</body>
</html>